<template>
  <div>
    <el-descriptions title="订单进度" :colon="false" :column="1" class="out-border mb10">
      <el-descriptions-item v-if="orderInfo && orderInfo.orderStatus == 'CANCEL'">
        <el-steps :active="stepActive" finish-status="success" process-status="finish">
          <el-step title="订单下单" :description="orderInfo && orderInfo.createTime"></el-step>
          <el-step title="订单取消" :description="orderInfo && orderInfo.cancelTime"></el-step>
          <!-- refundCloseTime 退款关闭时间-->
        </el-steps>
      </el-descriptions-item>
      <el-descriptions-item v-else-if="orderInfo && orderInfo.orderStatus == 'REFUND_CLOSE'">
        <el-steps :active="stepActive" finish-status="success" process-status="finish">
          <el-step title="订单下单" :description="orderInfo && orderInfo.createTime"></el-step>
          <el-step title="支付完成" :description="orderInfo && orderInfo.payTime"></el-step>
          <el-step title="安排师傅" :description="orderInfo && orderInfo.receiveOrderTime"></el-step>
          <!-- <el-step
            title="预约上门"
            :description="
              orderInfo &&
              orderInfo.appointmentDate &&
              `${orderInfo.appointmentDate} ${orderInfo.appointmentStartTime}-${orderInfo.appointmentFinishTime}`
            "
          ></el-step>-->
          <el-step title="退款关闭" :description="orderInfo && orderInfo.refundCloseTime"></el-step>
        </el-steps>
      </el-descriptions-item>
      <el-descriptions-item v-else>
        <el-steps :active="stepActive" finish-status="success" process-status="finish">
          <el-step title="订单下单" :description="orderInfo && orderInfo.createTime"></el-step>
          <el-step title="支付完成" :description="orderInfo && orderInfo.payTime"></el-step>
          <el-step title="安排师傅" :description="orderInfo && orderInfo.receiveOrderTime"></el-step>
          <el-step
            title="预约上门"
            :description="
              orderInfo &&
              orderInfo.appointmentDate &&
              `${orderInfo.appointmentDate} ${orderInfo.appointmentStartTime}-${orderInfo.appointmentFinishTime}`
            "
          ></el-step>
          <el-step title="上门签到" :description="orderInfo && orderInfo.startTime"></el-step>
          <el-step title="施工完成" :description="orderInfo && orderInfo.finishTime"></el-step>
          <el-step title="验收完成" :description="orderInfo && orderInfo.checkFinishTime"></el-step>
        </el-steps>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="施工信息" :colon="false" :column="1" class="out-border mb10">
      <el-descriptions-item
        v-if="
          orderInfo &&
          orderInfo.startWorkResDTO &&
          orderInfo.startWorkResDTO.createTime &&
          orderInfo.orderStatus !== 'CANCEL'
        "
      >
        <el-descriptions :column="1" title="施工前记录">
          <el-descriptions-item label="上门签到定位">
            {{
            orderInfo.startWorkResDTO.address
            }}
          </el-descriptions-item>
          <el-descriptions-item label="施工前照片">
            <el-image
              class="el-image"
              v-for="item in orderInfo.startWorkResDTO.images.split(',')"
              :key="item"
              :src="item"
              :preview-src-list="orderInfo.startWorkResDTO.images.split(',')"
            ></el-image>
          </el-descriptions-item>
          <el-descriptions-item label="施工前备注">
            {{
            orderInfo.startWorkResDTO.remark
            }}
          </el-descriptions-item>
          <el-descriptions-item label="上传时间">
            {{
            orderInfo.startWorkResDTO.createTime
            }}
          </el-descriptions-item>
        </el-descriptions>
      </el-descriptions-item>
      <el-descriptions-item v-else>暂无</el-descriptions-item>
      <el-divider></el-divider>
      <el-descriptions-item
        v-if="
          orderInfo &&
          orderInfo.finishWorkResDTO &&
          orderInfo.finishWorkResDTO.createTime &&
          orderInfo.orderStatus != 'CANCEL'
        "
      >
        <el-descriptions :column="1" title="施工完成记录">
          <el-descriptions-item label="完工照片">
            <el-image
              class="el-image"
              v-for="item in orderInfo.finishWorkResDTO.images.split(',')"
              :key="item"
              :src="item"
              :preview-src-list="orderInfo.finishWorkResDTO.images.split(',')"
            ></el-image>
          </el-descriptions-item>
          <el-descriptions-item
            label="尺寸"
            v-if="
              orderInfo && orderInfo.goodResDTO.serviceType === 'MEASUREMENT'
            "
          ><span class="red">{{ orderInfo.finishWorkResDTO.size }}平方米</span></el-descriptions-item>
          <el-descriptions-item label="完工备注">
            {{
            orderInfo.finishWorkResDTO.remark
            }}
          </el-descriptions-item>
          <el-descriptions-item label="上传时间">
            {{
            orderInfo.finishWorkResDTO.createTime
            }}
          </el-descriptions-item>
        </el-descriptions>
      </el-descriptions-item>
    </el-descriptions>

    <!-- 服务商订单 -->
    <el-descriptions
      title="支付信息"
      :colon="false"
      :column="1"
      class="out-border mb10"
    >
      <el-descriptions-item
        v-if="
          orderInfo && ['WAIT_PAY', 'CANCEL'].includes(orderInfo.orderStatus)
        "
      >暂无</el-descriptions-item>
      <el-descriptions-item
        v-if="
          [
            'WART_SITE',
            'WART_SEND',
            'REFUND_CLOSE',
            'WART_APPOINTMENT',
            'WORKING',
            'WART_CHECK',
            'FINISH',
          ].includes(orderInfo && orderInfo.orderStatus)
        "
      >
        <div>
          <div class="red">
            <span v-if="orderInfo.orderStatus!='REFUND_CLOSE'">
              服务商服务费：{{
              orderInfo && orderInfo.saasAmount | filterPriceFormat
              }}元
            </span>
            <span v-else>
              服务商服务费：{{
              0 | filterPriceFormat
              }}元
            </span>
            <span
              style="margin-left: 50px; color: #000"
            >{{ orderInfo && orderInfo.payMethod | filterPayMethod }}</span>
          </div>
          <div v-if="orderInfo.orderStatus !== 'REFUND_CLOSE'">
            <div v-for="(item, index) in orderInfo.saasAmountList" :key="index">
              <div v-if="item > 0" class="red mt10">
                服务费{{ index == 0 ? "首" : "再" }}次加价金额：{{
                item / 100
                }}元
              </div>
            </div>
          </div>
          <div v-else>
            <div v-for="(item, index) in orderInfo.saasAmountList" :key="index">
              <div v-if="item > 0" class="red mt10">
                服务费{{ index == 0 ? "首" : "再" }}次加价金额：{{
                0
                }}元
              </div>
            </div>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item
        v-if="
          [
            'WART_SITE',
            'WART_SEND',
            'REFUND_CLOSE',
            'WART_APPOINTMENT',
            'WORKING',
            'WART_CHECK',
            'FINISH',
          ].includes(orderInfo && orderInfo.orderStatus)
        "
      >
        <div>
          <div
            class="red"
            v-if="
              orderInfo.orderStatus !== 'REFUND_CLOSE' &&
              orderInfo.commissionAmount
            "
          >
            <span v-if=" orderInfo.orderStatus !== 'REFUND_CLOSE' ">
              服务商师傅佣金：{{
              orderInfo && orderInfo.commissionAmount | filterPriceFormat
              }}元
            </span>
            <span v-else>
              服务商师傅佣金：{{
              0 | filterPriceFormat
              }}元
            </span>
          </div>
          <div v-if="orderInfo.orderStatus !== 'REFUND_CLOSE'">
            <div v-for="(item, index) in orderInfo.commissionAmountList" :key="index">
              <div
                v-if="item > 0"
                class="red mt10"
              >服务商师傅{{ index == 0 ? "首" : "再" }}次加价佣金：{{ item / 100 }}元</div>
            </div>
          </div>
          <div v-else>
            <div v-for="(item, index) in orderInfo.commissionAmountList" :key="index">
              <div v-if="item > 0" class="red mt10">师傅{{ index == 0 ? "首" : "再" }}次加价佣金：{{0 }}元</div>
            </div>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item
        v-if="
          orderInfo &&
          orderInfo.orderStatus == 'REFUND_CLOSE' &&
          orderInfo.saleAmount
        "
      >
        <div class="red">商家退款金额：{{ orderInfo && orderInfo.saleAmount / 100 }}元</div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="客户信息" :column="1" class="out-border mb10">
      <el-descriptions-item label="客户姓名">{{ orderInfo && orderInfo.customerResDTO.userName }}</el-descriptions-item>
      <!-- 虚拟号 特殊处理显示-->
      <el-descriptions-item label="手机号码">
        <span
          :class="{
            red:
              orderInfo &&
              orderInfo.customerResDTO.userMobileType == 'VIRTUAL_NUMBER',
          }"
        >
          {{
          ` ${orderInfo && orderInfo.customerResDTO.userMobile} ${
          orderInfo && orderInfo.customerResDTO.userMobileType == "NORMAL"
          ? ""
          : " - " +
          orderInfo.customerResDTO.userVirtualNumber +
          "（虚拟号/分机号）"
          }`
          }}
        </span>

        <!-- 虚拟号 特殊处理显示-->
      </el-descriptions-item>
      <el-descriptions-item label="客户地址">
        {{
        orderInfo &&
        `${orderInfo.customerResDTO.province} ${orderInfo.customerResDTO.city} ${orderInfo.customerResDTO.district}`
        }}
      </el-descriptions-item>
      <el-descriptions-item label="详细地址">{{ orderInfo && orderInfo.customerResDTO.address }}</el-descriptions-item>
      <el-descriptions-item
        label="到货情况"
      >{{ orderInfo && orderInfo.customerResDTO.arrival | filterArrivalEnum }}</el-descriptions-item>
      <el-descriptions-item label="服务备注">{{ orderInfo && orderInfo.customerResDTO.serviceRemark }}</el-descriptions-item>
      <el-descriptions-item
        label="来源订单号"
      >{{ orderInfo && orderInfo.customerResDTO.originOrderNumber }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="商品服务信息" :column="1" class="out-border mb10">
      <!-- <el-descriptions-item label="商品类目">{{
        orderInfo && orderInfo.goodResDTO.serviceName
      }}</el-descriptions-item>-->
      <el-descriptions-item label="服务类型">
        <span class="red">
          {{
          orderInfo &&
          orderInfo.goodResDTO.serviceType | filterServiceCategoryTypeEnum
          }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="商品图片" v-if="orderInfo">
        <el-image
          v-for="(item, index) in orderInfo.goodResDTO.goodImages.split(',')"
          :src="item"
          :key="index"
          :preview-src-list="orderInfo.goodResDTO.goodImages.split(',')"
          alt
          class="goodImages"
        ></el-image>
      </el-descriptions-item>
      <el-descriptions-item
        label="具体商品类目"
      >{{ orderInfo && orderInfo.goodResDTO.serviceCategoryFullName }}</el-descriptions-item>
      <!-- 上门安装显示 -->
      <el-descriptions-item
        label="尺寸"
        v-if="orderInfo && orderInfo.goodResDTO.serviceType == 'INSTALLATION'"
      >
        <span class="red">{{ orderInfo && orderInfo.goodResDTO.size }}</span>
        {{ orderInfo.goodResDTO.serviceType == "INSTALLATION" ? "平方米" : "" }}
      </el-descriptions-item>
      <!-- 上门安装 -->
      <el-descriptions-item label="商品备注">{{ orderInfo && orderInfo.goodResDTO.goodRemark }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="服务商信息" :column="1" :colon="false" class="out-border mb10">
      <el-descriptions-item>{{ orderInfo && orderInfo.saasName }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    orderInfo: null,
    mode: {
      type: String,
      default: "platform"
    },
    saasId: {
      type: String,
      default: "LiuGe"
    }
  },
  computed: {
    stepActive() {
      if (this.orderInfo && this.orderInfo.orderStatus == "CANCEL") {
        const list = ["WAIT_PAY", "CANCEL"];
        return this.orderInfo ? list.indexOf(this.orderInfo.orderStatus) : 0;
      } else if (
        this.orderInfo &&
        this.orderInfo.orderStatus == "REFUND_CLOSE"
      ) {
        const list = [
          "WAIT_PAY",
          "WART_SEND",
          "WART_APPOINTMENT",
          "REFUND_CLOSE"
        ];
        return this.orderInfo ? list.indexOf(this.orderInfo.orderStatus) : 0;
      } else {
        const list = [
          "WAIT_PAY",
          "WART_SEND",
          "WART_APPOINTMENT",
          "WART_SITE",
          "WORKING",
          "WART_CHECK",
          "FINISH"
        ];
        return this.orderInfo ? list.indexOf(this.orderInfo.orderStatus) : 0;
      }
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>
<style scoped lang="scss">
.goodImages {
  width: 120px;
  height: 120px;
  margin: 0 10px 10px 0;
}
::v-deep .el-steps {
  width: 100% !important;
  .el-step {
    flex-basis: none !important;
  }
}
.red {
  color: red;
}
.el-image {
  width: 80px;
  height: 80px;
  background: #ddd;
  margin: 0 10px 10px 0;
}
</style>
<style>
.el-step {
  flex-basis: 40% !important;
}
</style>
